/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@media (forced-colors: active) {
    :host {
        --highcontrast-menu-item-background-color-default: ButtonFace;
        --highcontrast-menu-item-color-default: ButtonText;
        --highcontrast-menu-item-background-color-focus: Highlight;
        --highcontrast-menu-item-color-focus: HighlightText;
        --highcontrast-menu-checkmark-icon-color-default: Highlight;
        --highcontrast-menu-item-color-disabled: GrayText;
        --highcontrast-menu-item-focus-indicator-color: Highlight;
        --highcontrast-menu-item-selected-background-color: Highlight;
        --highcontrast-menu-item-selected-color: HighlightText;
    }

    @supports (color: SelectedItem) {
        :host {
            --highcontrast-menu-item-selected-background-color: SelectedItem;
            --highcontrast-menu-item-selected-color: SelectedItemText;
        }
    }
}

:host {
    --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50);
    --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50);
    --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100);
    --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100);
    --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description);
    --spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-border-width-200));
    --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800);
    --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100);
    --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default);
    --spectrum-menu-item-label-content-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-menu-item-label-content-color-down: var(--spectrum-neutral-content-color-down);
    --spectrum-menu-item-label-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-menu-item-label-icon-color-default: var(--spectrum-neutral-content-color-default);
    --spectrum-menu-item-label-icon-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-menu-item-label-icon-color-down: var(--spectrum-neutral-content-color-down);
    --spectrum-menu-item-label-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-menu-item-label-content-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-menu-item-label-icon-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-menu-item-description-line-height: var(--spectrum-line-height-100);
    --spectrum-menu-item-description-line-height-cjk: var(--spectrum-cjk-line-height-100);
    --spectrum-menu-item-description-color-default: var(--spectrum-neutral-subdued-content-color-default);
    --spectrum-menu-item-description-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
    --spectrum-menu-item-description-color-down: var(--spectrum-neutral-subdued-content-color-down);
    --spectrum-menu-item-description-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
    --spectrum-menu-item-description-color-disabled: var(--spectrum-disabled-content-color);
    --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100);
    --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100);
    --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight);
    --spectrum-menu-section-header-color: var(--spectrum-gray-900);
    --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900);
    --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900);
    --spectrum-menu-checkmark-icon-color-hover: var(--spectrum-accent-color-1000);
    --spectrum-menu-checkmark-icon-color-down: var(--spectrum-accent-color-1100);
    --spectrum-menu-checkmark-icon-color-focus: var(--spectrum-accent-color-1000);
    --spectrum-menu-drillin-icon-color-default: var(--spectrum-neutral-subdued-content-color-default);
    --spectrum-menu-drillin-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
    --spectrum-menu-drillin-icon-color-down: var(--spectrum-neutral-subdued-content-color-down);
    --spectrum-menu-drillin-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
    --spectrum-menu-item-value-color-default: var(--spectrum-neutral-subdued-content-color-default);
    --spectrum-menu-item-value-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
    --spectrum-menu-item-value-color-down: var(--spectrum-neutral-subdued-content-color-down);
    --spectrum-menu-item-value-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
    --spectrum-menu-checkmark-display-hidden: none;
    --spectrum-menu-checkmark-display-shown: block;
    --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
    --spectrum-menu-item-min-height: var(--spectrum-component-height-100);
    --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100);
    --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100);
    --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100);
    --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100);
    --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100);
    --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100);
    --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100);
    --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100);
    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75);
    --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100);
    --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100);
    --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium);
    --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium);
    --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium);
    --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium);
    --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium);
    --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width));
    --spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)));
    --spectrum-menu-item-focus-indicator-border-width: calc(var(--spectrum-menu-item-focus-indicator-width) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1));
}

:host([size="s"]) {
    --spectrum-menu-item-min-height: var(--spectrum-component-height-75);
    --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75);
    --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75);
    --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75);
    --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75);
    --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75);
    --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75);
    --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75);
    --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75);
    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50);
    --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75);
    --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75);
    --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small);
    --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small);
    --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small);
    --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small);
    --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small);
}

:host([size="l"]) {
    --spectrum-menu-item-min-height: var(--spectrum-component-height-200);
    --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200);
    --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200);
    --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200);
    --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200);
    --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200);
    --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200);
    --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200);
    --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200);
    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100);
    --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200);
    --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200);
    --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large);
    --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large);
    --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large);
    --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large);
    --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large);
}

:host([size="xl"]) {
    --spectrum-menu-item-min-height: var(--spectrum-component-height-300);
    --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300);
    --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300);
    --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300);
    --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300);
    --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300);
    --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300);
    --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300);
    --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300);
    --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200);
    --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300);
    --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300);
    --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large);
    --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large);
    --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large);
    --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large);
    --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
}

:host:dir(rtl),
:host([dir="rtl"]) {
    --spectrum-menu-item-focus-indicator-direction-scalar: -1;
}

:host {
    inline-size: var(--mod-menu-inline-size, auto);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: inline-block;
    overflow: auto;
}

:host:lang(ja),
:host:lang(ko),
:host:lang(zh) {
    --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk));
    --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk));
    --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk));
}

:host([selects]) ::slotted(sp-menu-item) {
    --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-hidden);
    padding-inline-start: var(--mod-menu-item-selectable-edge-to-text-not-selected, var(--spectrum-menu-item-selectable-edge-to-text-not-selected));
}

:host([selects]) ::slotted(sp-menu-item[selected]) {
    --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown);
    padding-inline-start: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
}

.spectrum-Menu-backIcon {
    margin-block: var(--mod-menu-back-icon-margin-block, var(--spectrum-menu-back-icon-margin));
    margin-inline: var(--mod-menu-back-icon-margin-inline, var(--spectrum-menu-back-icon-margin));
    fill: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-icon-color-default, var(--spectrum-menu-section-header-color)));
}

.spectrum-Menu-back:focus-visible {
    box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default);
    outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default);
    outline-offset: var(--spectrum-menu-item-focus-indicator-offset);
    border-radius: var(--spectrum-menu-item-corner-radius);
}

.spectrum-Menu-sectionHeading {
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-section-header-color, var(--spectrum-menu-section-header-color)));
    font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
    font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
    line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
    min-inline-size: var(--mod-menu-section-header-min-width, var(--spectrum-menu-section-header-min-width));
    padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text)));
    padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)));
    padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content));
    grid-area: sectionHeadingArea / 1 / sectionHeadingArea / -1;
    display: block;
}

.spectrum-Menu-back {
    padding-inline: var(--mod-menu-back-padding-inline-start, 0) var(--mod-menu-back-padding-inline-end, var(--spectrum-menu-item-label-inline-edge-to-content));
    padding-block: var(--mod-menu-back-padding-block-start, 0) var(--mod-menu-back-padding-block-end, 0);
    flex-flow: wrap;
    align-items: center;
    display: flex;
}

.spectrum-Menu-back .spectrum-Menu-sectionHeading {
    padding: 0;
}

.spectrum-Menu-backButton {
    cursor: pointer;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
}

.spectrum-Menu-backButton:focus-visible {
    outline: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-focus-indicator-color);
    outline-offset: calc((var(--spectrum-focus-indicator-thickness) + 1px) * -1);
}

.spectrum-Menu-backHeading {
    color: var(--highcontrast-menu-item-color-default, var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color)));
    font-size: var(--mod-menu-section-header-font-size, var(--spectrum-menu-section-header-font-size));
    font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight));
    line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height));
    display: block;
}
